import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import insurancePolicyService from "@/modules/individualOrdersManagement/insurancePolicy/insurancePolicy.service";
import {
  InsuranceOutlined,
  SearchOutlined,
  EditOutlined
} from "@ant-design/icons-vue";
import useNavigator from "@/hooks/useNavigator";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import Addinsure from "./popup/addinsure"
import { add } from "lodash";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh","refund"],
        right: ["filter", "search"],
        refund: {
          handler: () => {
            LTableRef.value.$fetchTableData();
          },
        },
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "保司保单号",
          dataIndex: "insurance_order_no",
          align: "center",
          width: "200px",
        },
        {
          title: "险种分类",
          dataIndex: "coverage_name",
          align: "center",
          width: "100px",
        },
        {
          title: "产品名称",
          dataIndex: "product_name",
          align: "center",
          width: "200px",
        },
        {
          title: "投保人姓名",
          dataIndex: "applicant_name",
          align: "center",
          width: "100px",
        },
        {
          title: "被保人姓名",
          dataIndex: "insured_name",
          align: "center",
          width: "100px",
        },
        {
          title: "保费",
          dataIndex: "sum_premium",
          align: "center",
          width: "100px",
        },
        {
          title: "承保时间",
          dataIndex: "insure_time",
          align: "center",
          width: "180px",
        },
        {
          title: "到期日期",
          dataIndex: "end_date",
          align: "center",
          width: "180px",
        },
        {
          title: "订单状态",
          dataIndex: ["order_status", "label"],
          align: "center",
          width: "100px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      searchForm: {
        applicant_name: {
          type: "input",
          label: "投保人姓名",
          attrs: { placeholder: "投保人姓名" },
        },
        applicant_id_no: {
          type: "input",
          label: "投保人证件号",
          attrs: { placeholder: "投保人证件号" },
        },
        insured_id_no: {
          type: "input",
          label: "被保人证件号",
          attrs: { placeholder: "被保人证件号" },
        },
        order_status: {
          type: "select",
          label: "保单状态",
          attrs: { placeholder: "订单状态" },
          datas: [
            {
              label: "待承保",
              value: 11,
            },
            {
              label: "已承保",
              value: 1,
            },
            {
              label: "已退保",
              value: 999,
            },
            {
              label: "承保失败",
              value: -1,
            },
          ],
        },
        insure_start_time: {
          type: "date",
          label: "承保开始时间",
        },
        insure_end_time: {
          type: "date",
          label: "承保结束时间",
        },
      },
      pagination: {
        total: 1,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
      cityArray: [],
      marriageArray: [],
      politicsFaceArray: [],
      nationArray: [],
      id: "",
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    //禁止
    const chargeDetailCheckBox = (record:any)=>{
        return {
          disabled:record.order_status.label != "已承保",
        }
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
        getCheckboxProps:chargeDetailCheckBox,
      };
    });
    const $service = new insurancePolicyService();
    const LTableRef = ref(null as any);
    const addPopupRef = ref(null as any);
    return () => (
      <Page>
        <CardWithTitle title="保单列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <SearchOutlined />,
                          }}
                          onClick={() => {
                            navigator.push({
                              path: "/individualOrders/insurancePolicy/insurancePolicyDetailPage",
                              query: {
                                order_no:record.order_no,
                              },
                            });
                          }}
                        >
                          查看
                        </a-button>
                          {
                           record.order_status.label === "待承保" && (
                            <a-button
                            type="primary"
                            size="small"
                            v-slots={{
                              icon: () => <EditOutlined />,
                            }}
                            onClick={() => {
                              addPopupRef.value.open(record.order_no)
                              // Modal.confirm({
                              //   title: "订单是否进行承保",
                              //   content: "承保后用户将无法进行撤单操作",
                              //   onOk: () => {
                              //     $service.add({
                              //       order_no:record.order_no,
                              //     }).then(()=>{
                              //       LTableRef.value.$fetchTableData();
                              //     })
                              //   },
                              // });
                              
                            }}
                          >
                            承保
                          </a-button>
                           )
                        }
                        {(record.order_status.label === "已承保") &&
                        (
                          <a-button
                            class="et-btn-danger"
                            type="primary"
                            size="small"
                            v-slots={{
                              icon: () => <InsuranceOutlined />,
                            }}
                            onClick={() => {
                              Modal.confirm({
                                title: "该保单是否进行退保",
                                content: "退保后用户将收到退保信息,原路返回保费",
                                onOk: () => {
                                  message.loading({ content: '退保中...', key: 'loading' });
                                  $service
                                    .delete({
                                      order_no: record.order_no,
                                    })
                                    .then(() => {
                                      LTableRef.value.$fetchTableData();
                                      message.success({ content: '退保成功!', key: 'loading', duration: 2 });
                                    }).catch(()=>{
                                      message.error({ content: '退保失败!', key: 'loading', duration: 2 });
                                    })
                                },
                              });
                            }}
                          >
                            退保
                          </a-button>
                        )}
                      </div>
                    );
                  }
                  // 字典类型
                  if (column.dataIndex === "status") {
                    let value = record.status === "1" ? true : false;
                    return <a-switch v-model:checked={value} disabled />;
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <Addinsure
          ref={addPopupRef}
          service={$service}
          onConfirm={(e) => {
            addPopupRef.value.close();
            LTableRef.value.$fetchTableData();
          }}
        />
      </Page>
    );
  },
});
